<template>
<view style="padding: 40rpx; min-height: 100vh; background-color: #f8f9fa;">
  <!-- 支付成功图标 -->
  <u-icon 
    name="checkmark-circle-fill" 
    color="#19be6b" 
    size="120" 
    style="display: block; margin: 40rpx auto"
  ></u-icon>

  <!-- 主标题 -->
  <view style="text-align: center; font-size: 36rpx; color: #303133; 
         margin: 20rpx 0; font-weight: 500; line-height: 1.5">
    支付成功！感谢您的购物
    <view style="font-size: 28rpx; color: #909399; margin-top: 20rpx">
      订单号：#202308150001
    </view>
  </view>

  <!-- 按钮组 -->
  <view style="margin: 60rpx 30rpx">
    <u-button 
      type="primary" 
      text="查看订单" 
      shape="circle"
      icon="order"
      color="linear-gradient(to right, #2979ff, #2b85e4)"
      style="margin-bottom: 30rpx; box-shadow: 0 6rpx 12rpx rgba(41,121,255,0.2)"
      @click="handleViewOrder"
    ></u-button>

    <u-button 
      type="info" 
      text="返回首页" 
      shape="circle"
      icon="home"
      plain
      style="border: none; color: #606266; 
             box-shadow: 0 6rpx 12rpx rgba(0,0,0,0.05)"
      @click="handleBackHome"
    ></u-button>
  </view>

  <!-- 附加信息 -->
  <view style="text-align: center; color: #909399; font-size: 24rpx; 
         position: fixed; bottom: 40rpx; width: 100%; left: 0">
    有任何问题请联系客服<text style="color: #2979ff"> 400-800-8800</text>
  </view>
</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style>
	@keyframes bounceIn {
	  from {
	    opacity: 0;
	    transform: scale(0.8);
	  }
	  to {
	    opacity: 1;
	    transform: scale(1);
	  }
	}
	
	.u-icon {
	  animation: bounceIn 0.6s ease;
	}
	
	.u-button--primary:active {
	  transform: scale(0.98);
	  transition: all 0.1s;
	}
</style>